<!-- 用户添加弹框 -->
<template>
    <el-form ref="eidtUserFormRef" :rules="userData.form_rules" :model="userData.form" label-width="110px">
        <el-form-item label="用户名" size="large" prop="username">
            <el-input size="large" v-model="userData.form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <!-- <el-form-item label="密码" prop="password">
            <el-input size="large" prefix-icon="Lock" :show-password="true" v-model="userData.form.password" placeholder="请输入密码"></el-input>
        </el-form-item> -->
        <el-form-item label="真实姓名" prop="realName">
            <el-input size="large" v-model="userData.form.realName" placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
            <el-input size="large" v-model="userData.form.phoneNumber" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="Email" prop="email">
            <el-input size="large" v-model="userData.form.email" placeholder="请输入Email"></el-input>
        </el-form-item>
        <el-form-item label="是否超级管理员">
            <el-switch @change="superAdminHandler" v-model="userData.form.superAdmin" inline-prompt active-text="是" inactive-text="否" />
        </el-form-item>
        <el-form-item v-if="!userData.form.superAdmin" label="角色分配" prop="roleList">
            <el-select 
            multiple 
            placeholder="请选择"
            :clearable="true" 
            @change="roleHandler" 
            v-model="userData.form.roleList"  
            style="width: 240px">
                <el-option v-for="item in roleArray" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm()">提交</el-button>
            <el-button @click="cancleEdit()">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
// ElementUI 单独引入
import { ElMessage } from 'element-plus'
import { reactive, ref , getCurrentInstance} from 'vue'
import { editUser } from "@/api/user"
export default {
    props: {
        roleData: {
            type: Array,
            default: []
        },
        userInfo: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props , context) {

        console.log("角色数据：",props.roleData)
        console.log("用户信息：",props.userInfo)

        // 数据库中所有角色列表
        let roleArray = props.roleData
        

        // 获取实例上下文
        const { proxy } = getCurrentInstance();
        const userData = reactive({
            /**
             * 通过JSON.parse(JSON.stringify(props.userInfo))将父组件的数据进行拷贝，
             * 解决子组件修改父组件传递过来的数据以后，父组件中的数据同样被修改的问题。
             * 参考：https://blog.csdn.net/weixin_42757570/article/details/110391894
             */
            form: JSON.parse(JSON.stringify(props.userInfo)),
            form_rules: {
                username: [
                    {
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    },
                    {
                        min: 6,
                        message: '密码至少6个字符',
                        trigger: 'blur'
                    }
                ],
                realName: [
                    {
                        required: true,
                        message: '请输入真实姓名',
                        trigger: 'blur'
                    }
                ],
                phoneNumber: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    }
                ],
                phoneNumber: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    }
                ],
                roleList: [
                    {
                        required: true,
                        message: '请给用户添加角色',
                        trigger: 'blur'
                    }
                ]
            },
        })




        // 当前用户所拥有的角色
        let userRoleArray = userData.form.roleList
        // 回显的角色数据
        let roleListValue = []
        for (let role in roleArray) {
            for (let userRole in userRoleArray) {
                if (userRoleArray[userRole].roleId == roleArray[role].roleId) {
                    roleListValue.push(roleArray[role].value)
                }
            }
        }
        /**
         * 通过ref()转换为响应式数据
         * “响应式”是指当数据改变后，vue会通知到使用该数据的代码，比如视图渲染中使用了数据，数据改变后，
         * 视图也会自动更新。
         * 详情可以通过ref()函数和reactive()函数去了解。
         */
         userData.form.roleList = ref(roleListValue)

        const roleHandler = (roleArray) => {
            console.log("点击了：",roleArray)
            userData.form.roleList = roleArray
        }
        const superAdminHandler = (value) => {
            userData.form.superAdmin = value
        }

        const submitForm = () => {
            proxy.$refs.eidtUserFormRef.validate(async (valid) => {
                if (!valid) {
                    return;
                }
                const requestData = {
                    // userId
                    userId: userData.form.userId,
                    // 用户名
                    username: userData.form.username,
                    // // 密码
                    // password: sha1(userData.form.password),
                    // 真实姓名
                    realName: userData.form.realName,
                    // 是否超级管理员
                    superAdmin: userData.form.superAdmin,
                    // email
                    email: userData.form.email,
                    // 手机号
                    phoneNumber: userData.form.phoneNumber,
                    // 用户所属角色
                    roleList: userData.form.roleList, 
                    // 头像
                    headImage: "images/default-head-image.png",
                }
                console.log("编辑得数据：",requestData)
                const data = await editUser(requestData)
                console.log("编辑结果：" , data)
                if (data.code !== 200) {    // 修改不成功
                    return
                } else {
                    ElMessage({
                        message: data.msg,
                        type: "success"
                    })
                    // 通知父组件
                    context.emit('editResult' , 1)
                    return;
                }
            })
        }

        /**
         * 取消编辑
         */
        const cancleEdit = () => {
            // 通知父组件
            context.emit('editResult' , 2)
        }

        return {
            userData,
            roleArray,
            roleListValue,
            cancleEdit,
            superAdminHandler,
            roleHandler,
            submitForm,
        }

    }
}
</script>

<style lang="scss" scoped></style>